<template>
    <div class="review">
        <header>
            <van-nav-bar
            title="评论"
            left-arrow
            @click-left="onClickLeft"
            />
            
        </header>
        <section>
            <h3 class="top">评分<van-rate v-model="reviewnum" size="16" /><span>99.9%好评</span></h3>
            <article class="reviewall" ref="ification">
                <ul >
                    <li>全部 (9999+)</li>
                     <li>有图 (29)</li>
                      <li>追评 (199)</li>
                       <li>有效实用 (299)</li>
                        <li>手感好 (89)</li>
                         <li>售后好 (799)</li>
                          <li>差评 (999+)</li>
                </ul>
                <div class="allicon" @click="show()">
                    {{all}}<van-icon :name="iconname" />
                </div>
            </article>
            <aside class="allrevie">
                <ul>
                    <li>
                        <dl>
                            <dt>
                                <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
                            </dt>
                            <dd>
                                <h4>你****说<van-rate v-model="onerate" size="14"/></h4>
                                <p>2018:11:11<span>11:11</span></p>
                            </dd>
                        </dl>
                        <h3 class="Sellercomments">宝贝很好看，手感也很好，很柔软，宝宝穿上很舒服</h3>
                        <div class="images">
                            <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
                        </div>
                        <div class="reply">
                            小编回复：感谢您的支持，我们会一如既往的全新为您服务，(*^_^*)
                        </div>
                    </li>
                     <li>
                        <dl>
                            <dt>
                                <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
                            </dt>
                            <dd>
                                <h4>你****说<van-rate v-model="onerate" size="14"/></h4>
                                <p>2018:11:11<span>11:11</span></p>
                            </dd>
                        </dl>
                        <h3 class="Sellercomments">宝贝很好看，手感也很好，很柔软，宝宝穿上很舒服</h3>
                        <div class="images">
                            <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
                        </div>
                        <div class="reply">
                            小编回复：感谢您的支持，我们会一如既往的全新为您服务，(*^_^*)
                        </div>
                    </li>
                </ul>
            </aside>
        </section>
        
    </div>
</template>

<script>
    export default {
        data() {
            return {
                reviewnum:5,
                all:'更多',
                iconname:'arrow-down',
                onerate:5
            }
        },
        methods: {
            onClickLeft(){
                this.$router.go(-1)
            },
            show(){
                if(this.all == '更多'){
                    this.all = ''
                    this.iconname = 'arrow-up'
                    this.$refs.ification.style.height = 'auto'
                }else if(this.all == ''){
                    this.all = '更多'
                     this.iconname = 'arrow-down'
                    this.$refs.ification.style.height = '25%'
                }
            }
        },
    }
</script>

<style scoped>

    .review{
        flex-direction: column;
        display: flex;
        justify-content: space-between;
        height: 100%;
    }
    section{
        overflow: auto;
        flex: 1;
        margin-bottom: 42px;
        padding: 10px
    }
   .top{
      display: flex;
      justify-content: space-between;
      width: 60%;
      padding-left: 14px
   }
   .reviewall{
       height: 26%;
       border-bottom: 1px solid #aaa;
   }
   .reviewall ul{
       height: 55%;
       display: flex;
       justify-content: space-around;
       flex-wrap: wrap;
       text-align: center;
       align-items: center;
       font-size: 16px;
       overflow: hidden;
       justify-content: flex-start;
       font-size: 14px;
       color: rgb(100,100,100)
       
   }
  .allicon{
      margin-top: 10px
  }
   .reviewall ul li{
       border:1px solid #aaa;
       margin-top: 10px;
       height: 24px;
        margin-left: 14px;
        padding: 3px 5px;
        line-height: 24px
   }
   .reviewall .allicon{
       display: flex;
       justify-content: center;
       align-items: center;
       height: 20%;
   }
   .allrevie{
       width: 100%;
       overflow: auto;
   }
   .allrevie ul{
       padding: 10px;
   }
   .allrevie ul li{
       height: 250px;
       border-bottom: 1px solid #aaa;
       padding-top: 30px
   }
   .allrevie ul li dl{
       display: flex;
       
   }
   .allrevie ul li dl dt{
       margin-right: 10px;
   }
   .allrevie ul li dl dt img{
       width: 64px;
       height: 64px;
       border-radius: 50%
   }
   .allrevie ul li dl dd{
       margin-top: 10px
   }
   .allrevie ul li dl dd  h4{
       display: flex
   }
   .allrevie ul li dl dd p{
       margin-top: 10px;
       display: flex;
   }
   .allrevie ul li dl dd p span{
       margin-left: 5px
   }
   .Sellercomments{
       margin: 10px 0
   }
   .images img{
       width: 64px;
       height: 64px;
       border: 1px solid #bbb
   }
   .reply{
       margin-top: 10px;
       border: 1px solid #bbb;
       padding: 10px
   }
</style>